<template>
  <div class="flex w-full h-full gap-2">
    <div class="flex w-1/2 h-full">
      <tinymceEditor 
      ref="editorRef"
      id="uuid"
      licenseKey="gpl"
      :init="editorConfig"
      v-model="innerContent"
      />
    </div>
    <!-- 编辑区域 -->
    
    <!-- 实时预览区域 -->
    <div class="flex w-1/2 h-full flex-col bg-white rounded-md">
      <div class="flex h-[40px] justify-between items-center p-3 mb-2">
        <h3>实时预览</h3>
        <Button @click="handleSave">保存</Button>
      </div>
      <div class="flex h-full border border-solid border-zinc-200 rounded-b-md ">
        <!-- 内容预览 -->
        <div class="flex p-3 overflow-hidden" v-html="innerContent">
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
// 向外部提供编辑器 元信息。
import TOCGenerator from '@/utils/tocGenerator';
import { computed, onMounted, ref, watch } from 'vue';
import tinymce, { Editor } from 'tinymce';
import { Button } from 'ant-design-vue';
import tinymceEditor from '@tinymce/tinymce-vue'


// 参数
const props = defineProps({
    value: {
      type:String,
      default:()=>''
    },
})
const innerContent = ref(props.value)
// 事件
const emits = defineEmits(['save'])

// 编辑器
const editorConfig = {
  base_url: '/node_modules/tinymce',
  plugins: 'advlist autolink lists link image',
  toolbar: 'undo redo | bold italic | bullist numlist',
  width:'100%',
  heigth:'100%',
}
const editor = ref<Editor|null>(null)
const editorRef = ref()
const getEditorInstance = () => {
  if (editorRef.value) {
    editor.value = editorRef.value.getEditor()
  }
}
function initEditor() {
  getEditorInstance()
}

onMounted(()=>{
  initEditor()
})


const handleSave = ()=>{
  // 生成 toc
  const toc = TOCGenerator.generateFromHTML(innerContent.value)
  const contentObj = {
    toc,
    content:innerContent.value
  }
  emits('save',contentObj)
}


  // 在预览区域滚动到指定锚点
function scrollToPreview(anchorId:string) {

}






// 获取TOC
function getTOC() {
}

// 设置内容


// 设置标题
function setTitle(title:string) {
}




</script>

